﻿<template>
  <view class="itinerary-son">
    <!-- 导航栏 -->
    <AdaptiveNavBar :showBack="true" :showHome="false" :showShadow="false" text-color="#333333"
      background-color="#ffffff" title="具体行程安排" />

    <!-- 行程内容展示 -->
    <view class="itinerary-container" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
      <!-- 天数选择 -->
      <view class="day-selector-container">
        <view class="day-label">天/DAY <text style="color: red;">*</text></view>
        <view class="day-dropdown">
          <picker :value="dayIndex" @change="onDayChange" :range="dayOptions">
            <view class="day-picker">
              <text style="font-size: 28rpx;">第{{ dayIndex + 1 }}天</text>
              <image src="/static/systemIcon/arrow-bottom.png" class="picker-arrow" />
            </view>
          </picker>
        </view>
      </view>
      <view class="itinerary-card">
        <view class="day-tag-itinerary">D{{ dayIndex + 1 }}</view>
        <textarea class="itinerary-textarea" v-model="dayItemsText" placeholder=""></textarea>
      </view>
    </view>


    <!-- 行程与服务安排 -->
    <view class="form-section">
      <view class="form-header">
        <text class="form-title">行程与服务安排</text>
        <view class="form-dropdown" style="width: 50%">
          <picker :value="typeIndex" @change="onTypeChange" :range="typeOptions">
            <view class="dropdown-value">
              <text>{{ selectedItemType }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </picker>
        </view>
      </view>



      <!-- 底部操作栏 -->
      <view class="footer-actions">
        <view class="btn btn-return" @tap="goBack">返回</view>
        <view class="btn btn-clear" @tap="clearAndReturn">清空/删除</view>
        <view class="btn btn-confirm" @tap="saveAndReturn">确定</view>
      </view>

      <!-- 表单内容 -->
      <view class="form-content" v-if="false">
        <!-- 主要项目名称 -->
        <view class="form-group" v-if="selectedItemType">
          <text class="form-label"><text class="required">*</text>{{ currentLabels.mainLabel }}</text>
          <view class="input-wrapper">
            <input class="form-input" v-model="tempItem.alt" :placeholder="'请输入' + currentLabels.mainLabel" />
          </view>
        </view>

        <!-- 参考时段 -->
        <view class="form-group">
          <text class="form-label"><text class="required">*</text>{{ currentLabels.timeLabel }}</text>
          <view class="time-picker-group">
            <view class="time-picker" @tap="openTimeRangePopup">
              <text class="time-text">{{ tempItem.startTime || '开始时间' }}</text>
              <text class="picker-arrow">▼</text>
            </view>
            <text class="time-separator">→</text>
            <view class="time-picker" @tap="openTimeRangePopup">
              <text class="time-text">{{ tempItem.endTime || '结束时间' }}</text>
              <text class="picker-arrow">▼</text>
            </view>
          </view>
        </view>

        <!-- 地点位置 -->
        <view class="form-group">
          <text class="form-label"><text class="required">*</text>{{ currentLabels.addressLabel }}</text>
          <view class="location-picker" @tap="selectAddress">
            <text class="location-text">{{ tempItem.address || '请输入行程地点名称，或点击定位' }}</text>
            <view class="location-icon">
              <text class="icon-location">📍</text>
            </view>
          </view>
        </view>

        <!-- 描述信息 - 根据类型显示不同的描述字段 -->
        <view class="form-group" v-if="selectedItemType">

          <view class="textarea-wrapper">
            <textarea class="form-textarea" v-model="tempItem.description"
              :placeholder="currentLabels.descPlaceholder" />
          </view>
        </view>

        <!-- 费用说明提示 -->
        <view class="form-group resource-notice">
          <view class="resource-notice-content">
            <text class="required">*</text>
            <text class="notice-text">该项目将列入资源服务/调度计划</text>
            <text class="notice-subtext">请在成团前确认资源。</text>
          </view>
          <view class="notice-link">
            <text class="link-text">查看详情</text>
          </view>
        </view>
      </view>
    </view>

    <!--    TODO 复用表单 填写信息之后拷贝到新的对象里面-->
    <!--    集散S-->
    <view class="section-wrap" v-if="selectedItemType === '集散'">
      <!--      集散使用-->
      <view class="row-100">
        <view class="flex-1">
          <text class="danger-title"><text class="text-danger">*</text> 集散</text>
        </view>
        <input class="form-input input-dashed--padded" v-model="tempItem.alt" placeholder="必填，例：团队集合、团队解散" />
      </view>
      <!--      边线 TODO 伪元素真实1像素-->
      <view class="split-line"></view>
      <!--      参考时段-->
      <view class="row-full-100">
        <view class="label-line-80">
          <text class="danger-title"><text class="text-danger">*</text> 参考时段</text>
        </view>
        <view class="flex-group-3">
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.startTime || '开始时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
          <view class="time-sec">
            <image class="arrow-right-icon" src="../../static/systemIcon/arrow-right.png" mode=""></image>
          </view>
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.endTime || '结束时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--      地理位置S-->
      <view class="split-line"></view>
      <view class="address-row">
        <view class="address-label-line">
          <view class="danger-title address-label">
            <view><text class="text-danger">*</text> 地理位置</view>
          </view>
        </view>
        <view class="address-content-group">
          <view class="address-display-container" @tap="selectAddress">
            <view v-if="tempItem.address" class="address-display">
              <text v-if="getAddressName(tempItem.address)" class="address-name">{{ getAddressName(tempItem.address)
                }}</text>
              <text v-if="getAddressLocation(tempItem.address)" class="address-location">{{
                getAddressLocation(tempItem.address) }}</text>
            </view>
            <text v-else class="address-placeholder">请点击右侧图标选择定位</text>
          </view>
          <view class="location-icon-new" @tap="selectAddress">
            <up-icon name="map" color="#FFF" size="26"></up-icon>
          </view>
        </view>
      </view>
      <!--      服务介绍-->
      <view class="split-line"></view>
      <view class="service-desc">
        <textarea class="service-desc-text" v-model="tempItem.description"
          placeholder="请输入服务介绍，例如参考时长或行驶里程以及行程中的其它介绍或安排" />
      </view>
      <view class="split-line"></view>
      <!--      查看详情-->
      <view class="resource-notice">
        <view class="resource-notice-content">
          <text class="required">*</text> 该项目将列入资源服务 <text class="text-black">/调度计划</text>
          <text class="notice-subtext-inline">&nbsp; 请在成团前确认资源。</text>
        </view>
        <view class="notice-link">
          <text class="detail-btn">查看详情</text>
          <up-icon name="arrow-right" class="notice-arrow arrow-ml-10"></up-icon>
        </view>
      </view>
    </view>
    <!--    集散E-->
    <!--    交通S-->
    <view class="section-wrap" v-if="selectedItemType === '交通'">
      <!--      交通使用-->
      <view class="row-100">
        <view class="flex-1">
          <text class="danger-title"><text class="text-danger">*</text> 交通区间</text>
        </view>
        <input class="form-input input-dashed" style="padding-left: 20rpx;" v-model="tempItem.alt"
          placeholder="必填，例：团队集合、团队解散" />
      </view>
      <!--      边线-->
      <view class="split-line"></view>
      <!--      参考时段-->
      <view class="row-full-100">
        <view class="label-line-80">
          <text class="danger-title"><text class="text-danger">*</text> 参考时段</text>
        </view>
        <view class="flex-group-3">
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.startTime || '开始时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
          <view class="time-sec">
            <up-icon name="arrow-rightward" color="#666" size="20"></up-icon>
          </view>
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.endTime || '结束时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--      地理位置S-->
      <view class="split-line"></view>
      <view class="row-full-100 address-row">
        <view class="label-line-80 address-label-line">
          <view class="danger-title address-label">
            <text class="text-danger">*</text> 地理位置
          </view>
        </view>
        <view class="flex-group-3-h80 address-content-group">
          <view class="address-display-container" @tap="selectAddress">
            <view v-if="tempItem.address" class="address-display">
              <text v-if="getAddressName(tempItem.address)" class="address-name">{{ getAddressName(tempItem.address)
                }}</text>
              <text v-if="getAddressLocation(tempItem.address)" class="address-location">{{
                getAddressLocation(tempItem.address) }}</text>
            </view>
            <text v-else class="address-placeholder">请点击右侧图标选择定位</text>
          </view>
          <view class="location-icon-new" @tap="selectAddress">
            <up-icon name="map" color="#FFF" size="26"></up-icon>
          </view>
        </view>
      </view>
      <!--      服务介绍-->
      <view class="split-line"></view>
      <view class="service-desc">
        <textarea class="service-desc-text" v-model="tempItem.description"
          placeholder="请输入服务介绍，例如参考时长或行驶里程以及行程中的其它介绍或安排" />
      </view>
      <view class="split-line"></view>
      <!--      查看详情-->
      <view class="resource-notice">
        <view class="resource-notice-content">
          <text class="required">*</text> 该项目将列入资源服务 <text class="text-black">/调度计划</text>
          <text class="notice-subtext-inline">&nbsp; 请在成团前确认资源。</text>
        </view>
        <view class="notice-link">
          <text class="detail-btn">查看详情</text>
          <up-icon name="arrow-right" class="notice-arrow arrow-ml-10"></up-icon>
        </view>
      </view>
    </view>
    <!--    交通E-->
    <!--    用餐S-->
    <view class="section-wrap" v-if="selectedItemType === '用餐'">
      <!--      用餐使用-->
      <view class="row-100">
        <view class="flex-1">
          <text class="danger-title"><text class="text-danger">*</text> 餐饮标题</text>
        </view>
        <input class="form-input input-dashed" v-model="tempItem.alt" placeholder="必填，例：团队集合、团队解散" />
      </view>
      <!--      边线-->
      <view class="split-line"></view>
      <!--      参考时段-->
      <view class="row-full-100">
        <view class="label-line-80">
          <text class="danger-title"><text class="text-danger">*</text> 用餐时段</text>
        </view>
        <view class="flex-group-3">
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.startTime || '开始时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
          <view class="time-sec">
            <up-icon name="arrow-rightward" color="#666" size="20"></up-icon>
          </view>
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.endTime || '结束时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--      地理位置S-->
      <view class="split-line"></view>
      <view class="row-full-100 address-row">
        <view class="label-line-80 address-label-line">
          <view class="danger-title address-label">
            <text class="text-danger">*</text> 地理位置
          </view>
        </view>
        <view class="flex-group-3-h80 address-content-group">
          <view class="address-display-container" @tap="selectAddress">
            <view v-if="tempItem.address" class="address-display">
              <text v-if="getAddressName(tempItem.address)" class="address-name">{{ getAddressName(tempItem.address)
                }}</text>
              <text v-if="getAddressLocation(tempItem.address)" class="address-location">{{
                getAddressLocation(tempItem.address) }}</text>
            </view>
            <text v-else class="address-placeholder">请点击右侧图标选择定位</text>
          </view>
          <view class="location-icon-new" @tap="selectAddress">
            <up-icon name="map" color="#FFF" size="26"></up-icon>
          </view>
        </view>
      </view>
      <!--      服务介绍-->
      <view class="split-line"></view>
      <view class="service-desc">
        <textarea class="service-desc-text" v-model="tempItem.description"
          placeholder="请输入服务介绍，例如参考时长或行驶里程以及行程中的其它介绍或安排" />
      </view>
      <view class="split-line"></view>
      <!--      查看详情-->
      <view class="resource-notice">
        <view class="resource-notice-content">
          <text class="required">*</text> 该项目将列入资源服务 <text class="text-black">/调度计划</text>
          <text class="notice-subtext-inline">&nbsp; 请在成团前确认资源。</text>
        </view>
        <view class="notice-link">
          <text class="detail-btn">查看详情</text>
          <up-icon name="arrow-right" class="notice-arrow arrow-ml-10"></up-icon>
        </view>
      </view>
    </view>
    <!--    用餐E-->
    <!--    活动S-->
    <view class="section-wrap" v-if="selectedItemType === '活动'">
      <!--      活动使用-->
      <view class="row-100">
        <view class="flex-1">
          <text class="danger-title"><text class="text-danger">*</text> 活动标题</text>
        </view>
        <input class="form-input input-dashed" v-model="tempItem.alt" placeholder="必填，例：团队集合、团队解散" />
      </view>
      <!--      边线-->
      <view class="split-line"></view>
      <!--      参考时段-->
      <view class="row-full-100">
        <view class="label-line-80">
          <text class="danger-title"><text class="text-danger">*</text> 参考时段</text>
        </view>
        <view class="flex-group-3">
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.startTime || '开始时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
          <view class="time-sec">
            <up-icon name="arrow-rightward" color="#666" size="20"></up-icon>
          </view>
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.endTime || '结束时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--      地理位置S-->
      <view class="split-line"></view>
      <view class="row-full-100 address-row">
        <view class="label-line-80 address-label-line">
          <view class="danger-title address-label">
            <text class="text-danger">*</text> 地理位置
          </view>
        </view>
        <view class="flex-group-3-h80 address-content-group">
          <view class="address-display-container" @tap="selectAddress">
            <view v-if="tempItem.address" class="address-display">
              <text v-if="getAddressName(tempItem.address)" class="address-name">{{ getAddressName(tempItem.address)
                }}</text>
              <text v-if="getAddressLocation(tempItem.address)" class="address-location">{{
                getAddressLocation(tempItem.address) }}</text>
            </view>
            <text v-else class="address-placeholder">请点击右侧图标选择定位</text>
          </view>
          <view class="location-icon-new" @tap="selectAddress">
            <up-icon name="map" color="#FFF" size="26"></up-icon>
          </view>
        </view>
      </view>
      <!--      服务介绍-->
      <view class="split-line"></view>
      <view class="service-desc">
        <textarea class="service-desc-text" v-model="tempItem.description"
          placeholder="请输入服务介绍，例如参考时长或行驶里程以及行程中的其它介绍或安排" />
      </view>
      <view class="split-line"></view>
      <!--      查看详情-->
      <view class="resource-notice">
        <view class="resource-notice-content">
          <text class="required">*</text> 该项目将列入资源服务 <text class="text-black">/调度计划</text>
          <text class="notice-subtext-inline">&nbsp; 请在成团前确认资源。</text>
        </view>
        <view class="notice-link">
          <text class="detail-btn">查看详情</text>
          <up-icon name="arrow-right" class="notice-arrow arrow-ml-10"></up-icon>
        </view>
      </view>
    </view>
    <!--    活动E-->
    <!--    住宿S-->
    <view class="section-wrap" v-if="selectedItemType === '住宿'">
      <!--      住宿使用-->
      <view class="row-100">
        <view class="flex-1">
          <text class="danger-title"><text class="text-danger">*</text> 住宿标题</text>
        </view>
        <input class="form-input input-dashed" v-model="tempItem.alt" placeholder="必填，例：团队集合、团队解散" />
      </view>
      <!--      边线-->
      <view class="split-line"></view>
      <!--      参考时段-->
      <view class="row-full-100">
        <view class="label-line-80">
          <text class="danger-title"><text class="text-danger">*</text> 入住时段</text>
        </view>
        <view class="flex-group-3">
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.startTime || '开始时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
          <view class="time-sec">
            <up-icon name="arrow-rightward" color="#666" size="20"></up-icon>
          </view>
          <view class="flex-1" @tap="openTimeRangePopup">
            <view class="time-select">
              <text class="time-text">{{ tempItem.endTime || '结束时间' }}</text>
              <view class="arrow-bottom-flex">
                <image class="arrow-bottom-icon" src="../../static/systemIcon/arrow-bottom.png" mode=""></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--      地理位置S-->
      <view class="split-line"></view>
      <view class="row-full-100 address-row">
        <view class="label-line-80 address-label-line">
          <view class="danger-title address-label">
            <text class="text-danger">*</text> 地理位置
          </view>
        </view>
        <view class="flex-group-3-h80 address-content-group">
          <view class="address-display-container" @tap="selectAddress">
            <view v-if="tempItem.address" class="address-display">
              <text v-if="getAddressName(tempItem.address)" class="address-name">{{ getAddressName(tempItem.address)
                }}</text>
              <text v-if="getAddressLocation(tempItem.address)" class="address-location">{{
                getAddressLocation(tempItem.address) }}</text>
            </view>
            <text v-else class="address-placeholder">请点击右侧图标选择定位</text>
          </view>
          <view class="location-icon-new" @tap="selectAddress">
            <up-icon name="map" color="#FFF" size="26"></up-icon>
          </view>
        </view>
      </view>
      <!--      服务介绍-->
      <view class="split-line"></view>
      <view class="service-desc">
        <textarea class="service-desc-text" v-model="tempItem.description"
          placeholder="请输入服务介绍，例如参考时长或行驶里程以及行程中的其它介绍或安排" />
      </view>
      <view class="split-line"></view>
      <!--      查看详情-->
      <view class="resource-notice">
        <view class="resource-notice-content">
          <text class="required">*</text> 该项目将列入资源服务 <text class="text-black">/调度计划</text>
          <text class="notice-subtext-inline">&nbsp; 请在成团前确认资源。</text>
        </view>
        <view class="notice-link">
          <text class="detail-btn">查看详情</text>
          <up-icon name="arrow-right" class="notice-arrow arrow-ml-10"></up-icon>
        </view>
      </view>
    </view>
    <!--    住宿E-->
    <!-- 占位  -- 兼容底部按钮 -->
    <view style="width: 100%;height: 144rpx;">

    </view>

    <!-- 底部按钮 -->
    <view class="footer-actions">
      <view class="btn btn-return" @tap="goBack">返回</view>
      <view class="btn btn-clear" @tap="clearAndReturn">清空/删除</view>
      <view class="btn btn-confirm" @tap="saveAndReturn">确定</view>
    </view>

    <view v-if="showTimeRangePopup" class="time-range-popup-mask" @tap="closeTimeRangePopup">
      <view class="time-range-popup" @tap.stop>
        <view class="time-range-popup__header">
          <text class="time-range-popup__title">选择时间</text>
          <text class="time-range-popup__close" @tap="closeTimeRangePopup">×</text>
        </view>
        <view class="time-range-popup__body">
          <view class="time-range-popup__labels">
            <text class="label-text">开始时</text>
            <text class="label-text">开始分</text>
            <text class="label-text">结束时</text>
            <text class="label-text">结束分</text>
          </view>
          <picker-view class="time-range-picker" :value="timeRangePickerValue" indicator-style="height: 70rpx;"
            @change="onTimeRangePickerChange">
            <picker-view-column>
              <view class="picker-item" v-for="(hour, index) in timeHours" :key="'start-hour-' + index">{{ hour }}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(minute, index) in timeMinutes" :key="'start-minute-' + index">{{ minute
                }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(hour, index) in timeHours" :key="'end-hour-' + index">{{ hour }}</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(minute, index) in timeMinutes" :key="'end-minute-' + index">{{ minute }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="time-range-popup__footer">
          <view class="popup-btn cancel" @tap="closeTimeRangePopup">取消</view>
          <view class="popup-btn confirm" @tap="confirmTimeRangeSelection">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { useProductStore } from '@/store/product.js'
import CustomDropdown from '@/components/CustomDropdown.vue'

export default {
  components: {
    CustomDropdown
  },
  data() {
    return {
      productStore: null,
      dayIndex: 0,
      dayOptions: [],
      typeOptions: ['集散', '交通', '用餐', '活动', '住宿', '位置'],
      typeIndex: 0,
      selectedItemType: '集散',
      // 默认为集散
      tempItem: {
        title: '集散',
        alt: '',
        address: '',
        startTime: '',
        endTime: '',
        description: ''
      },
      dayItems: [],
      dayItemsText: '', // 这个现在用于编辑main字段
      // 行程表单对象
      itineraryFormData: {
        js: {},
      },
      // 编辑模式相关
      isEditMode: false,
      editItemIndex: -1,
      // 新增天数相关
      isNewDay: false,
      addPosition: 'after', // 'before' 或 'after'
      // 时间选择器数据（5分钟间隔）
      timeHours: Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0')),
      timeMinutes: Array.from({ length: 12 }, (_, i) => String(i * 5).padStart(2, '0')), // 00, 05, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55
      showTimeRangePopup: false,
      tempStartHourIndex: 0,
      tempStartMinuteIndex: 0,
      tempEndHourIndex: 0,
      tempEndMinuteIndex: 0
    }
  },
  computed: {
    currentLabels() {
      const map = {
        '集散': {
          mainLabel: '集散',
          timeLabel: '参考时段',
          addressLabel: '地点位置',

          descPlaceholder: '请输入服务介绍'
        },
        '交通': {
          mainLabel: '交通方式',
          timeLabel: '参考时段',
          addressLabel: '地点位置',

          descPlaceholder: '请输入交通说明'
        },
        '用餐': {
          mainLabel: '用餐',
          timeLabel: '参考时段',
          addressLabel: '地点位置',

          descPlaceholder: '请输入用餐安排说明'
        },
        '活动': {
          mainLabel: '活动标题',
          timeLabel: '参考时段',
          addressLabel: '地点位置',

          descPlaceholder: '请输入活动描述'
        },
        '住宿': {
          mainLabel: '入住酒店',
          timeLabel: '参考时段',
          addressLabel: '地点位置',

          descPlaceholder: '请输入入住安排说明'
        },
        '位置': {
          mainLabel: '位置',
          timeLabel: '参考时段',
          addressLabel: '地点位置',

          descPlaceholder: '请输入位置说明'
        }
      }
      return map[this.selectedItemType] || {
        mainLabel: '项目名称',
        timeLabel: '参考时段',
        addressLabel: '地点位置',
        descLabel: '项目描述',
        descPlaceholder: '请输入描述'
      }
    },

    // 获取开始时间的索引
    startTimeIndex() {
      return this.getTimeIndex(this.tempItem.startTime)
    },

    // 获取结束时间的索引
    endTimeIndex() {
      return this.getTimeIndex(this.tempItem.endTime)
    },

    timeRangePickerValue() {
      return [
        this.tempStartHourIndex,
        this.tempStartMinuteIndex,
        this.tempEndHourIndex,
        this.tempEndMinuteIndex
      ]
    }
  },
  onLoad(query) {
    this.productStore = useProductStore()
    if (query && query.dayIndex) {
      this.dayIndex = parseInt(query.dayIndex) || 0
    }

    // 检查是否是新增天数
    if (query && query.isNewDay === 'true') {
      this.isNewDay = true
      this.addPosition = query.addPosition || 'after'
    }

    // 动态生成天数选项
    this.generateDayOptions()

    // 如果传入了itemIndex，说明是编辑现有项目
    if (query && query.itemIndex !== undefined) {
      this.isEditMode = true
      this.editItemIndex = parseInt(query.itemIndex)
      console.log('进入编辑模式:', {
        dayIndex: this.dayIndex,
        editItemIndex: this.editItemIndex,
        query: query
      })

      // 获取当前天的行程项目
      if (this.productStore &&
        this.productStore.subPageData &&
        this.productStore.subPageData.specificItinerary &&
        this.productStore.subPageData.specificItinerary[this.dayIndex] &&
        this.productStore.subPageData.specificItinerary[this.dayIndex].items) {

        const item = this.productStore.subPageData.specificItinerary[this.dayIndex].items[this.editItemIndex]
        if (item) {
          console.log('加载编辑项目数据:', item)
          // 将现有项目数据填充到表单中
          this.tempItem = JSON.parse(JSON.stringify(item)) // 深拷贝避免直接修改原对象

          // 设置类型选择器
          const typeIndex = this.typeOptions.findIndex(type => type === item.title)
          if (typeIndex !== -1) {
            this.typeIndex = typeIndex
            this.selectedItemType = item.title
          }
        }
      }
    } else {
      // 新增模式
      this.isEditMode = false
      this.editItemIndex = -1
      console.log('进入新增模式')

      // 加载当天最后一次选中的地址
      this.loadLastSelectedAddress()
    }

    this.loadDayItems()
    this.loadMainContent()

    // 如果是新添加的天数，初始化行程标题
    if (this.isNewDay) {
      this.dayItemsText = ``
    }
  },
  methods: {
    // 动态生成天数选项
    generateDayOptions() {
      // 从store中获取实际的天数
      let maxDays = 5 // 默认最大天数

      if (this.productStore &&
        this.productStore.subPageData &&
        this.productStore.subPageData.specificItinerary) {
        maxDays = this.productStore.subPageData.specificItinerary.length
        // 如果store中没有数据，至少显示1天
        if (maxDays === 0) {
          maxDays = 1
        }
      }

      // 生成天数选项数组
      this.dayOptions = []
      for (let i = 1; i <= maxDays; i++) {
        this.dayOptions.push(`第${i}天`)
      }

      console.log('生成天数选项:', this.dayOptions, '当前选择:', this.dayIndex)
    },

    loadDayItems() {
      // 加载当前天的行程项目
      if (this.productStore &&
        this.productStore.subPageData &&
        this.productStore.subPageData.specificItinerary &&
        this.productStore.subPageData.specificItinerary[this.dayIndex]) {
        const items = this.productStore.subPageData.specificItinerary[this.dayIndex].items || []
        this.dayItems = items.map(item => {
          return `${item.title || ''} ${item.alt || ''} ${item.startTime || ''}-${item.endTime || ''} ${item.address || ''}`
        })
      } else {
        this.dayItems = ['五月花广场 五月门口集散点', '五月门口集散点 乘坐观光巴士', '五月门口集散点 风景游览区']
      }
    },

    loadMainContent() {
      // 加载对应天数的main字段内容
      if (this.productStore &&
        this.productStore.subPageData &&
        this.productStore.subPageData.specificItinerary &&
        this.productStore.subPageData.specificItinerary[this.dayIndex]) {
        // 加载已保存的main字段
        const mainContent = this.productStore.subPageData.specificItinerary[this.dayIndex].main
        if (mainContent) {
          this.dayItemsText = mainContent
        } else {
          // 如果没有main内容，为空
          this.dayItemsText = ``
        }
      } else {
        // 如果该天数不存在，为空
        this.dayItemsText = ``
      }
    },

    // 创建新天数
    createNewDay() {
      const newDayData = {
        items: [],
        expanded: true,
        main: this.dayItemsText || `第${this.dayIndex + 1}天`,
        day: this.dayIndex + 1
      };

      if (this.addPosition === 'before') {
        // 在前面插入
        this.productStore.subPageData.specificItinerary.unshift(newDayData);
        // 重新计算所有天数的day属性
        this.productStore.subPageData.specificItinerary.forEach((day, index) => {
          day.day = index + 1;
        });
      } else {
        // 在后面添加
        this.productStore.subPageData.specificItinerary.push(newDayData);
      }
    },

    onDayChange(e) {
      this.dayIndex = parseInt(e.detail.value)
      this.loadDayItems()
      this.loadMainContent()

      // 如果是新增模式，加载新天数的最后一次选中的地址
      if (!this.isEditMode) {
        this.loadLastSelectedAddress()
      }
    },

    onTypeChange(e) {
      this.typeIndex = e.detail.value
      this.selectedItemType = this.typeOptions[this.typeIndex]
      this.tempItem.title = this.typeOptions[this.typeIndex]
      // 重置输入框内容，使其与选择的类型匹配
      this.tempItem.alt = ''
    },

    // 获取时间的索引（用于 multiSelector）
    getTimeIndex(timeStr) {
      if (!timeStr) return [0, 0]
      const [hour, minute] = timeStr.split(':')
      const hourIndex = parseInt(hour) || 0
      // 将分钟数转换为5分钟间隔的索引（向下取整到最近的5分钟）
      const minuteValue = parseInt(minute) || 0
      const minuteIndex = Math.floor(minuteValue / 5)
      return [hourIndex, minuteIndex]
    },

    // 将索引转换为时间字符串
    indexToTime(hourIndex, minuteIndex) {
      const hour = String(hourIndex).padStart(2, '0')
      const minute = String(minuteIndex * 5).padStart(2, '0')
      return `${hour}:${minute}`
    },

    openTimeRangePopup() {
      const [startHour, startMinute] = this.getTimeIndex(this.tempItem.startTime)
      const [endHour, endMinute] = this.getTimeIndex(this.tempItem.endTime)
      this.tempStartHourIndex = startHour
      this.tempStartMinuteIndex = startMinute
      this.tempEndHourIndex = endHour
      this.tempEndMinuteIndex = endMinute
      this.showTimeRangePopup = true
    },

    closeTimeRangePopup() {
      this.showTimeRangePopup = false
    },

    onTimeRangePickerChange(e) {
      const [startHour, startMinute, endHour, endMinute] = e.detail.value
      this.tempStartHourIndex = startHour
      this.tempStartMinuteIndex = startMinute
      this.tempEndHourIndex = endHour
      this.tempEndMinuteIndex = endMinute
    },

    confirmTimeRangeSelection() {
      const startTime = this.indexToTime(this.tempStartHourIndex, this.tempStartMinuteIndex)
      const endTime = this.indexToTime(this.tempEndHourIndex, this.tempEndMinuteIndex)

      if (this.selectedItemType === '住宿' && !this.validateTimeRange(startTime, endTime)) {
        uni.showToast({
          title: '开始时间必须在结束时间之前',
          icon: 'none'
        })
        return
      }

      this.tempItem.startTime = startTime
      this.tempItem.endTime = endTime
      this.showTimeRangePopup = false
    },

    selectAddress() {
      uni.chooseLocation({
        success: (res) => {
          console.log('res看看定位', res)
          if (res.address || res.name) {
            const selectedAddress = `${res.address || ''}${res.name ? '-' + res.name : ''}`
            this.tempItem.address = selectedAddress.trim()
          }
          if (res.latitude) {
            this.tempItem.latitude = res.latitude
          }
          if (res.longitude) {
            this.tempItem.longitude = res.longitude
          }
        },
        fail: (err) => {
          console.log('fail', err)
          uni.showToast({
            title: '获取位置失败',
            icon: 'none'
          })
        }
      })
    },

    // 加载当天最后一条行程数据的地址
    loadLastSelectedAddress() {
      try {
        // 获取当前天数的所有行程项目
        const currentDayItems = this.getCurrentDayItems()
        if (currentDayItems && currentDayItems.length > 0) {
          // 获取最后一条数据（按添加顺序，最后一条就是数组的最后一个元素）
          const lastItem = currentDayItems[currentDayItems.length - 1]
          if (lastItem && lastItem.address) {
            this.tempItem.address = lastItem.address
            if (lastItem.latitude) {
              this.tempItem.latitude = lastItem.latitude
            }
            if (lastItem.longitude) {
              this.tempItem.longitude = lastItem.longitude
            }
            console.log('加载当天最后一条数据的地址:', lastItem.address)
          }
        }
      } catch (e) {
        console.error('加载地址失败:', e)
      }
    },

    // 获取地址名称（拆分后的第二部分，显示在上面）
    getAddressName(address) {
      if (!address) return '';
      if (address.includes('-')) {
        const parts = address.split('-');
        return parts[1] ? parts[1].trim() : '';
      }
      return '';
    },

    // 获取地址位置（拆分后的第一部分，显示在下面）
    getAddressLocation(address) {
      if (!address) return '';
      if (address.includes('-')) {
        const parts = address.split('-');
        return parts[0].trim();
      }
      return address; // 如果没有"-"，返回原地址
    },

    // 返回上一页，不保存编辑内容
    goBack() {
      uni.navigateBack()
    },

    // 清空/删除当前页面输入信息并返回
    clearAndReturn() {
      // 如果是编辑模式，则删除该项目
      if (this.isEditMode && this.editItemIndex >= 0) {
        // 删除该项目
        if (this.productStore &&
          this.productStore.subPageData &&
          this.productStore.subPageData.specificItinerary &&
          this.productStore.subPageData.specificItinerary[this.dayIndex] &&
          this.productStore.subPageData.specificItinerary[this.dayIndex].items) {

          // 显示确认对话框
          uni.showModal({
            title: '确认删除',
            content: '确定要删除此行程项目吗？',
            success: (res) => {
              if (res.confirm) {
                // 删除项目
                this.productStore.subPageData.specificItinerary[this.dayIndex].items.splice(this.editItemIndex, 1)
                console.log('this.productStore.subPageData.specificItinerary[this.dayIndex].items', this.productStore.subPageData.specificItinerary[this.dayIndex].items)

                // 检查删除后该天是否还有行程项目
                const remainingItems = this.productStore.subPageData.specificItinerary[this.dayIndex].items
                if (!remainingItems || remainingItems.length === 0) {
                  // 如果该天没有行程项目了，删除这一天
                  this.productStore.subPageData.specificItinerary.splice(this.dayIndex, 1)

                  // 重新计算所有天数的day属性
                  this.productStore.subPageData.specificItinerary.forEach((day, index) => {
                    day.day = index + 1
                  })

                  console.log('该天已无行程项目，已删除该天')
                }

                // 通知上一页刷新数据
                this.notifyParentPageRefresh()

                // 显示删除成功提示
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })

                // 返回上一页
                setTimeout(() => {
                  uni.navigateBack()
                }, 500)
              }
            }
          })
        }
      } else {
        // 如果是新增模式，则清空表单并返回
        uni.showModal({
          title: '确认清空',
          content: '确定要清空当前输入的内容吗？',
          success: (res) => {
            if (res.confirm) {
              // 清空表单
              this.tempItem = {
                title: '集散',
                alt: '',
                startTime: '',
                endTime: '',
                address: '',
                description: ''
              }
              this.selectedItemType = '集散'
              this.typeIndex = 0
              this.dayItemsText = ''

              // 显示清空成功提示
              uni.showToast({
                title: '已清空',
                icon: 'success'
              })

              // 返回上一页
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            }
          }
        })
      }
    },

    // 保存已输入信息并返回
    saveAndReturn() {
      if (!this.validate()) return

      // 保存数据
      this.onSave()

      // 返回上一页
      // uni.navigateBack()
    },

    validate() {
      let { selectedItemType } = this;
      if (!selectedItemType) {
        uni.showToast({
          title: '请选择项目类型',
          icon: 'none'
        })
        return false
      }
      console.log('this.tempItem', this.tempItem)
      if (!this.tempItem.address) {
        uni.showToast({
          title: '请选择地点位置',
          icon: 'none'
        })
        return false
      }
      if (!this.tempItem.startTime) {
        uni.showToast({
          title: '请选择开始时间',
          icon: 'none'
        })
        return false
      }
      if (!this.tempItem.endTime) {
        uni.showToast({
          title: '请选择结束时间',
          icon: 'none'
        })
        return false
      }

      // 验证开始时间是否在结束时间之前   住宿有第二天凌晨的选择需求，去除掉判断
      if (selectedItemType === '住宿' && !this.validateTimeRange(this.tempItem.startTime, this.tempItem.endTime)) {
        uni.showToast({
          title: '开始时间必须在结束时间之前',
          icon: 'none'
        })
        return false
      }

      // 检查时间重叠
      if (!this.checkTimeOverlap()) {
        return false
      }

      return true
    },

    // 验证时间范围
    validateTimeRange(startTime, endTime) {
      if (!startTime || !endTime) {
        return false
      }

      // 将时间字符串转换为分钟数进行比较
      const startMinutes = this.timeToMinutes(startTime)
      const endMinutes = this.timeToMinutes(endTime)

      return startMinutes < endMinutes
    },

    // 将时间字符串转换为分钟数
    timeToMinutes(timeStr) {
      const [hours, minutes] = timeStr.split(':').map(Number)
      return hours * 60 + minutes
    },

    // 检查时间重叠
    checkTimeOverlap() {
      if (!this.tempItem.startTime || !this.tempItem.endTime) {
        return true // 如果时间不完整，跳过检查
      }

      // 获取当前天数的所有行程项目
      const currentDayItems = this.getCurrentDayItems()
      if (!currentDayItems || currentDayItems.length === 0) {
        return true // 如果没有其他项目，不重叠
      }

      const newStartTime = this.timeToMinutes(this.tempItem.startTime)
      const newEndTime = this.timeToMinutes(this.tempItem.endTime)

      // 检查与现有项目的时间重叠
      for (let i = 0; i < currentDayItems.length; i++) {
        const item = currentDayItems[i]

        // 如果是编辑模式，跳过当前编辑的项目
        if (this.isEditMode && this.editItemIndex === i) {
          continue
        }

        if (!item.startTime || !item.endTime) {
          continue // 跳过没有完整时间的项目
        }

        const existingStartTime = this.timeToMinutes(item.startTime)
        const existingEndTime = this.timeToMinutes(item.endTime)

        // 检查时间重叠
        if (this.isTimeOverlapping(newStartTime, newEndTime, existingStartTime, existingEndTime)) {
          uni.showToast({
            title: `时间重叠：与"${item.title}"项目时间冲突，请调整时间`,
            icon: 'none',
            duration: 3000
          })
          return false
        }
      }

      return true
    },

    // 获取当前天数的所有行程项目
    getCurrentDayItems() {
      if (this.productStore &&
        this.productStore.subPageData &&
        this.productStore.subPageData.specificItinerary &&
        this.productStore.subPageData.specificItinerary[this.dayIndex]) {
        return this.productStore.subPageData.specificItinerary[this.dayIndex].items || []
      }
      return []
    },

    // 判断两个时间段是否重叠
    isTimeOverlapping(start1, end1, start2, end2) {
      // 两个时间段重叠的条件：start1 < end2 && start2 < end1
      return start1 < end2 && start2 < end1
    },

    // 对当前天数的行程项目按开始时间排序
    sortDayItemsByTime() {
      if (this.productStore &&
        this.productStore.subPageData &&
        this.productStore.subPageData.specificItinerary &&
        this.productStore.subPageData.specificItinerary[this.dayIndex] &&
        this.productStore.subPageData.specificItinerary[this.dayIndex].items) {

        const items = this.productStore.subPageData.specificItinerary[this.dayIndex].items

        // 按开始时间排序
        items.sort((a, b) => {
          const timeA = this.timeToMinutes(a.startTime || '00:00')
          const timeB = this.timeToMinutes(b.startTime || '00:00')
          return timeA - timeB
        })

        console.log('行程项目已按时间排序:', items)
      }
    },

    // 通知上一页刷新数据
    notifyParentPageRefresh() {
      const pages = getCurrentPages()
      if (pages.length > 1) {
        const prevPage = pages[pages.length - 2]
        if (prevPage && prevPage.$vm) {
          // 通知上一页刷新数据
          prevPage.$vm.refreshItinerary = true
          prevPage.$vm.currentDayIndex = this.dayIndex
          // 强制上一页面刷新
          if (typeof prevPage.$vm.loadInitialData === 'function') {
            prevPage.$vm.loadInitialData()
          }
        }
      }
    },

    onSave() {
      if (!this.validate()) return

      // 初始化store结构
      if (!this.productStore.subPageData) {
        this.productStore.subPageData = {}
      }

      if (!Array.isArray(this.productStore.subPageData.specificItinerary)) {
        this.productStore.subPageData.specificItinerary = []
      }

      // 如果是新增天数，需要先创建天数数据
      if (this.isNewDay) {
        this.createNewDay()
      }

      // 确保对应day存在
      if (!this.productStore.subPageData.specificItinerary[this.dayIndex]) {
        this.productStore.subPageData.specificItinerary[this.dayIndex] = {
          items: [],
          day: this.dayIndex + 1,
          main: '',
          dayText: `第${this.dayIndex + 1}天`
        }
      }

      // 保存main字段内容（行程标题）
      this.productStore.subPageData.specificItinerary[this.dayIndex].main = this.dayItemsText || `第${this.dayIndex + 1}天`
      this.productStore.subPageData.specificItinerary[this.dayIndex].dayText = `第${this.dayIndex + 1}天`

      // 根据编辑模式标志判断操作类型
      console.log('保存模式检查:', {
        isEditMode: this.isEditMode,
        editItemIndex: this.editItemIndex,
        dayIndex: this.dayIndex
      })

      if (this.isEditMode && this.editItemIndex >= 0) {
        // 编辑模式：修改现有项目
        console.log('执行编辑模式，更新项目索引:', this.editItemIndex)
        if (this.productStore.subPageData.specificItinerary[this.dayIndex].items[this.editItemIndex]) {
          // 更新现有项目，保持原有的 isOriginal 标记
          const existingItem = this.productStore.subPageData.specificItinerary[this.dayIndex].items[this.editItemIndex];
          this.productStore.subPageData.specificItinerary[this.dayIndex].items[this.editItemIndex] = {
            ...this.tempItem,
            isOriginal: existingItem.isOriginal !== undefined ? existingItem.isOriginal : false
          }
          console.log('项目已更新:', this.tempItem)
          uni.showToast({
            title: '修改成功',
            icon: 'success'
          })
        }
      } else {
        // 新增模式：添加新项目，标记为 isOriginal: false
        console.log('执行新增模式，添加新项目')
        if (this.selectedItemType && this.tempItem.address) {
          this.productStore.subPageData.specificItinerary[this.dayIndex].items.push({
            ...this.tempItem,
            isOriginal: false // 新增数据标记为 false
          })
          console.log('新项目已添加:', this.tempItem)
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
        }
      }

      // 对当前天数的行程项目按开始时间排序
      this.sortDayItemsByTime()

      // 设置页面返回数据
      const pages = getCurrentPages()
      if (pages.length > 1) {
        const prevPage = pages[pages.length - 2]
        if (prevPage && prevPage.$vm) {
          // 通知上一页刷新数据
          prevPage.$vm.refreshItinerary = true
          prevPage.$vm.currentDayIndex = this.dayIndex
          // 强制上一页面刷新
          if (typeof prevPage.$vm.loadInitialData === 'function') {
            prevPage.$vm.loadInitialData()
          }
        }
      }

      // 显示成功提示
      uni.showToast({
        title: this.isNewDay ? '添加成功' : '保存成功',
        icon: 'success'
      })

      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
      }, 500)
    },

    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.itinerary-son {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
}


.day-selector-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 50rpx;
  background-color: white;

  .day-label {
    font-size: 28rpx;
    color: #333;
  }

  .day-dropdown {
    .day-picker {
      display: flex;
      align-items: center;
      background-color: rgba(242, 242, 242, 1);
      padding: 15rpx 0rpx 15rpx 30rpx;
      letter-spacing: 8rpx;
      font-weight: 700;
      border-radius: 8rpx;
      color: #333333;

      text {
        font-size: 30rpx;
        color: #333;
      }

      .picker-arrow {
        width: 48rpx;
        height: 48rpx;
        margin-left: 20rpx;

      }
    }
  }
}

.itinerary-container {
  //margin: 0 31rpx;
  position: relative;
  margin-top: 20rpx;
  background-color: white;
  padding-bottom: 20rpx;

  .day-tag-itinerary {
    position: absolute;
    top: 108rpx;
    left: 0;
    border-bottom-right-radius: 40rpx;
    border-top-right-radius: 40rpx;
    background-color: #3FBDA3;
    color: #fff;
    font-size: 28rpx;
    padding: 10rpx 30rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    width: 40rpx;
  }

  .itinerary-card {
    width: 77%;
    flex: 1;
    border: 1px dashed #3FBDA3;
    border-radius: 8rpx;
    margin: 0rpx 20rpx 0rpx 120rpx;

    .itinerary-textarea {
      width: calc(100% - 20rpx);
      // min-height: 200rpx;
      font-size: 30rpx;
      font-weight: 700;
      color: #333;
      padding: 10rpx;
      box-sizing: border-box;
    }
  }
}

.day-tag {
  background-color: #3FBDA3;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  height: fit-content;
  margin-right: 15rpx;
}

.day-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;

  .day-label {
    font-size: 28rpx;
    color: #333;
  }

  .day-picker {
    display: flex;
    align-items: center;

    text {
      font-size: 28rpx;
      color: #333;
    }

    .day-star {
      color: #ff4d4f;
      margin-left: 2rpx;
    }

    .picker-arrow {
      font-size: 24rpx;
      color: #666;
      margin-left: 5rpx;
    }
  }
}

.day-content {
  display: flex;
  background-color: #fff;
  padding: 15rpx 20rpx;
  margin: 0 30rpx 20rpx;
  border: 2rpx dashed #3FBDA3;
  border-radius: 8rpx;

  .day-tag {
    width: 50rpx;
    height: 50rpx;
    background-color: #3FBDA3;
    color: #fff;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6rpx;
    margin-right: 15rpx;
    flex-shrink: 0;
  }

  .day-items-container {
    flex: 1;

    .day-items-textarea {
      width: 100%;
      height: 80rpx;
      border: none;
      outline: none;
      font-size: 28rpx;
      color: #333;
      background-color: transparent;
      padding: 0;
      margin: 0;
    }
  }
}

.form-section {
  background-color: white;

  //border-radius: 8rpx;
  //margin: 0 30rpx 30rpx;
  margin-top: 20rpx;


  .form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;

    .form-title {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      margin: 0rpx 30rpx;
      position: relative;
    }

    .form-title::before {
      content: '*';
      position: absolute;
      top: -2rpx;
      left: -14rpx;
      color: #ff4d4f;
      font-size: 22rpx;
    }

    .form-dropdown {
      width: 300rpx;

      .dropdown-value {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;
        height: 70rpx;

        border-radius: 6rpx;
        background-color: #f5f5f5;
        color: #333;
        font-size: 28rpx;
      }
    }
  }

  .type-description {
    padding: 10rpx 20rpx;
    background-color: #f8fffc;
    border-bottom: 1rpx solid #eee;

    .type-text {
      font-size: 24rpx;
      color: #666;
    }
  }

  .form-content {
    padding: 20rpx;

    .form-group {
      display: flex;
      //  上下居中
      align-items: center;

      margin-bottom: 30rpx;

      .form-label {
        font-size: 26rpx;
        color: #666;
        margin-bottom: 15rpx;
        margin-right: 70rpx;
        display: block;

        .required {
          color: #ff4d4f;
          margin-right: 4rpx;
        }
      }

      .input-wrapper {
        width: 64%;
        border: 1rpx solid #ddd;
        border-radius: 6rpx;
        padding: 0 20rpx;
        height: 70rpx;

        .form-input {
          width: 100%;
          height: 100%;
          font-size: 26rpx;
        }
      }

      .textarea-wrapper {
        width: 100%;
        border: 1rpx solid #ddd;
        border-radius: 6rpx;
        padding: 10rpx 20rpx;

        .form-textarea {
          width: 100%;
          height: 150rpx;
          font-size: 26rpx;
        }
      }

      .time-picker-group {
        display: flex;
        align-items: center;

        .time-picker {
          width: 150rpx;
          height: 60rpx;

          border-radius: 6rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10rpx;
          font-size: 26rpx;
          color: #333;
          background-color: #f5f5f5;
        }

        .picker-arrow {
          font-size: 20rpx;
          color: #999;
          margin-left: 5rpx;
        }

        .time-separator {
          margin: 0 20rpx;
          color: #999;
        }
      }

      .location-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;

        border-radius: 6rpx;
        padding: 15rpx 20rpx;


        .location-text {
          font-size: 26rpx;
          color: #999;
          flex: 1;
        }

        .location-icon {
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .icon-location {
            color: #3FBDA3;
            font-size: 36rpx;
          }
        }
      }

      .notice-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 150rpx;

        .notice-text {
          font-size: 26rpx;
          color: #999;
        }

        .notice-arrow {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}

.footer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 9999;
  /* 确保按钮在最顶层 */
  pointer-events: auto;
  /* 确保整个区域可以接收点击事件 */
  isolation: isolate;
  /* 创建新的层叠上下文 */

  .btn {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8rpx;
    font-size: 28rpx;
    margin: 0 10rpx;
    position: relative;
    /* 确保按钮有定位上下文 */
    z-index: 10000;
    /* 按钮层级更高 */
    pointer-events: auto;
    /* 确保按钮可以接收点击事件 */
    cursor: pointer;
    /* 添加鼠标指针样式 */
    user-select: none;
    /* 防止文本选择 */
    -webkit-tap-highlight-color: transparent;
    /* 移除点击高亮 */
  }

  .btn-return {
    border: 1rpx solid #ddd;
    color: #666;
    background-color: #fff;
    /* 确保有背景色 */
  }

  .btn-clear {
    border: 1rpx solid #ff6b6b;
    color: #ff6b6b;
    background-color: #fff;
    /* 确保有背景色 */
  }

  .btn-confirm {
    background-color: #6187f6;
    color: #fff;
  }
}

.resource-notice {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10rpx 0rpx;
  border-radius: 6rpx;
  margin-top: 10rpx;
}

.resource-notice-content {
  flex: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.notice-text {
  flex: 1;
  font-size: 24rpx;
  font-weight: 500;
  color: #333;
}

.notice-subtext {
  font-size: 22rpx;
  color: #666;
  margin-left: 5rpx;
}

.notice-link {
  display: flex;
  align-items: center;
  color: #3FBDA3;
}

.link-text {
  font-size: 24rpx;
  color: #D1D2D1;
}

.link-arrow {
  margin-left: 3rpx;
  font-size: 24rpx;
  color: #3FBDA3;
}


.cancel-btn,
.confirm-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 10rpx;
}

.cancel-btn {
  background-color: #fff;
  color: #666;
  border: 1rpx solid #ddd;
}

.confirm-btn {
  background-color: #3FBDA3;
  color: #fff;
}

.time-select {
  font-size: 24rpx;
  border-radius: 6rpx;
  background: #f2f2f2;
  height: 80rpx;
  line-height: 80rpx;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: center;

  .time-text {
    margin-left: 20rpx;
  }
}

.time-sec {
  background: #ffffff;
  // height: 80rpx;
  line-height: 80rpx;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;

  .arrow-right-icon {
    width: 40rpx;
    height: 40rpx;
  }
}

.location-icon-new {
  background: #3FBDA3;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  height: 80rpx;
  width: 80rpx;
  margin-left: -2rpx;
  color: white;
  padding: 0rpx 8rpx;
  border-radius: 8rpx;
}

.service-desc {
  width: 100%;
  height: 144rpx;
  overflow: hidden;
  /* 防止内容溢出 */
}

.service-desc-text {
  width: 100%;
  min-height: 80rpx;
  max-height: 144rpx;
  /* 限制最大高度不超过父容器 */
  font-size: 26rpx;
  padding: 20rpx;
  box-sizing: border-box;
  overflow-y: auto;
  /* 内容超出时可以滚动 */
}

.resource-notice {
  height: 100rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.resource-notice-content {
  flex: 4;
  font-size: 26rpx;
}

.notice-link {
  // flex: 1;
  font-size: 24rpx;
  color: #ccc;
}

//  分割线
.split-line {
  border: 0.01rpx solid #f2f2f2;
}

.section-wrap {
  background-color: white;
  padding: 20rpx;
}

.row-100 {
  display: flex;
  align-items: center;
  background-color: #FFF;
  height: 100rpx;
}

.row-full-100 {
  display: flex;
  align-items: center;
  background-color: #FFF;
  min-height: 100rpx;
  padding: 10rpx 0rpx;
  width: 100%;
}

.label-line-80 {
  flex: 1;
  line-height: 80rpx;
  height: 80rpx;
}

.flex-group-3 {
  display: flex;
  align-items: center;
  flex: 3;
}

.flex-group-3-h80 {
  display: flex;
  align-items: center;
  flex: 3;
  height: 80rpx;
}

.flex-1 {
  flex: 1;
}

.input-dashed {
  border: 1rpx solid #ccc;
  flex: 3;
  height: 80rpx;
  font-size: 26rpx;
  padding-left: 20rpx;
  box-sizing: border-box;
}

.input-dashed--padded {
  border: 1rpx solid #ccc;
  flex: 3;
  height: 80rpx;
  font-size: 26rpx;
  box-sizing: border-box;
  padding-left: 20rpx;
}

.address-input {
  flex: 7;
  border: 1rpx dashed #cccccc;
  height: 80rpx;
  box-sizing: border-box;
  padding-left: 20rpx;
  font-size: 26rpx;
}

.address-display-container {
  flex: 7;
  // border: 1rpx dashed #cccccc;
  min-height: 80rpx;
  border-radius: 4rpx;
  padding: 0rpx 20rpx;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  box-sizing: border-box;
}

.address-display {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
  width: 100%;
}

.address-name {
  font-size: 26rpx;
  color: #333;
  font-weight: 700;
  line-height: 1.4;
}

.address-location {
  font-size: 24rpx;
  color: #666;
  line-height: 1.4;
  font-weight: 700;
  margin-left: 0;
  /* 确保与name左对齐 */
}

/* 地理位置特殊处理 - 标签与地址name对齐 */
.address-row {
  display: flex;
  align-items: flex-start;
  /* 整体左对齐 */
  padding: 20rpx 0rpx;
}

.address-label-line {
  display: flex;
  align-items: flex-start;
  padding-top: 2rpx;
  /* 微调对齐 */
}

.address-label {
  display: flex;
  align-items: flex-start;
  flex: 1;
  margin-right: 30rpx;
}

.address-content-group {
  align-items: flex-start;
  display: flex;
  flex: 3,
}


.address-display {
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

.address-placeholder {
  font-size: 26rpx;
  color: #999;
  line-height: 1.4;
}

.address-input--padded {
  flex: 7;
  border: 1rpx dashed #cccccc;
  height: 80rpx;
  box-sizing: border-box;
  padding-left: 20rpx;
  font-size: 26rpx;
}

.arrow-ml-10 {
  margin-left: 10rpx;
}

.text-black {
  color: black;
}

.notice-subtext-inline {
  display: block;
  color: #666;
  font-size: 24rpx;
  margin-top: 8rpx;
}

.text-danger {
  color: #ff4d4f;
}

.danger-title {
  font-size: 30rpx;
  color: #333333;
}

.required {
  color: #ff4d4f;
  margin-right: 10rpx;
}

.detail-btn {
  margin-right: 50rpx;
}

.arrow-bottom-flex {
  display: flex;
  align-items: center;
  height: 100%;

  .arrow-bottom-icon {
    width: 40rpx;
    height: 40rpx;
  }
}

.time-range-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 11000;
}

.time-range-popup {
  width: 100%;
  background: #ffffff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  padding: 32rpx 32rpx 40rpx;
  box-sizing: border-box;
  z-index: 11001;
}

.time-range-popup__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.time-range-popup__title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333333;
}

.time-range-popup__close {
  font-size: 40rpx;
  color: #999999;
  padding: 8rpx 16rpx;
}

.time-range-popup__body {
  background: #f8f8f8;
  border-radius: 20rpx;
  padding: 24rpx 0 0;
}

.time-range-popup__labels {
  display: flex;
  justify-content: space-around;
  padding: 0 24rpx 16rpx;
  font-size: 24rpx;
  color: #666666;
}

.label-text {
  flex: 1;
  text-align: center;
}

.time-range-picker {
  height: 320rpx;
  width: 100%;
}

.picker-item {
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333333;
}

.time-range-popup__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32rpx;
  gap: 24rpx;
}

.popup-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 30rpx;
  font-weight: 600;
}

.popup-btn.cancel {
  background: #f5f5f5;
  color: #666666;
}

.popup-btn.confirm {
  background: #FC642F;
  color: #ffffff;
}
</style>